import { Tooltip } from 'antd';
import React from 'react';
import './OperatorRuning.less';

// 定义机器数据的类型
export interface StationRunState {
  name: string;
  runtime: number;
}

// 定义组件的属性类型
interface StationRuntimeProps {
  stationsRuntime: StationRunState[];
}

// 创建组件
const StationRuntime: React.FC<StationRuntimeProps> = ({ stationsRuntime }) => {
  const topMachines = stationsRuntime.sort((a, b) => b.runtime - a.runtime).slice(0, 3);

  return (
    <section>
      <ol className="topStationWrap">
        {topMachines.map((machine, index) => {
          const className = `topStationName${index + 1}`;
          return (
            <li key={index} className={className}>
              <span className="stationRuntime">{machine.runtime}</span>
              <Tooltip title={machine.name} overlayClassName="customTooltip">
                <strong className="stationName">{machine.name}</strong>
              </Tooltip>
            </li>
          );
        })}
      </ol>
    </section>
  );
};

export default StationRuntime;
